@use '../tools/colors';

@keyframes loading-indicator-dots-pulse {
  0% {
    fill-opacity: 0.2;
  }

  100% {
    fill-opacity: 0.8;
  }
}

@keyframes spinner-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.icon {
  &--eta {
    .icon {
      &__ring {
        fill-opacity: 1;
      }
    }
  }

  &--information {
    &__fill {
      fill-opacity: 0.05;
    }

    &__ring {
      fill-opacity: 0.6;
    }
  }

  &--limits {
    .limits {
      &__bars {
        &--top {
          fill-opacity: 0.4;
        }

        &--middle {
          fill-opacity: 1;
        }

        &--bottom {
          fill-opacity: 1;
        }
      }
    }
  }

  &--loading-indicator {
    .loading-indicator {
      &--dots {
        &__dot {
          animation: loading-indicator-dots-pulse 0.6s linear alternate infinite;
          fill: colors.$white;

          &--center {
            animation-delay: 0.2s;
          }

          &--right {
            animation-delay: 0.4s;
          }
        }
      }
    }
  }

  &--spinner {
    animation: spinner-spin 1.25s linear infinite;
  }
}
